<template>
    <div>
        <template v-if="login">
            <!-- <canvas id="J_dotLine" style="background-color: #F7F7F7;"></canvas> -->
            <!-- <div id="mydiv" style="height:1000px;"></div> -->
            <div class="container">
                <div class="row" >
                    <Form ref="formInline" class="y_login_box col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4 "  :model="formInline" :rules="ruleInline" inline>
                        <FormItem prop="user">
                            <Input type="text" class="y_login_input" v-model="formInline.user" placeholder="Username">
                                <Icon type="ios-person-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input type="password" class="y_login_input" v-model="formInline.password" placeholder="Password">
                                <Icon type="ios-locked-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button class="y_login_btn" type="primary" @click="handleSubmit('formInline')">登录</Button>
                            <Button type="primary" @click="handleReplace('formInline')">重置</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="layout" ref="layout" :class="{'layout-hide-text': spanLeft < 5}">
                <Row type="flex">
                    <Col :span="spanLeft" class="layout-menu-left">
                        <Menu active-name="1" theme="dark" width="auto">
                            <div class="layout-logo-left"></div>
                            <Submenu name="1">
                                <template slot="title">
                                    <Icon type="ios-navigate" :size="iconSize"></Icon>
                                    <span class="layout-text">用户管理</span>
                                </template>
                                    <MenuItem  name="1-1" :size="wordPadding">
                                        <router-link @click.native="changeHeaderLink('查询修改')" class="sideLeftWord y_made" to="/adminselect">
                                                查询修改
                                        </router-link>
                                    </MenuItem>
                            <MenuItem name="1-2" @click.native="changeHeaderLink('新增用户')">新增用户</MenuItem>
                            <MenuItem name="1-3" @click.native="changeHeaderLink('管理权限')">管理权限</MenuItem>
                            </Submenu>
                            <Submenu name="2">
                                <template slot="title">
                                    <Icon type="ios-keypad" :size="iconSize"></Icon>
                                    <span class="layout-text">博客管理</span>
                                </template>
                                    <MenuItem name="2-1">
                                        <router-link @click.native="changeHeaderLink('博客树')" class="sideLeftWord y_made" to="/blogs">
                                                博客树
                                        </router-link>
                                    </MenuItem>
                                    <MenuItem class="sideLeftWord" name="2-2">
                                        <router-link @click.native="changeHeaderLink('博客上传')" class="sideLeftWord y_made" to="/blogsupload">
                                                博客上传
                                        </router-link>
                                    </MenuItem>
                                    <MenuItem class="sideLeftWord" name="2-3">
                                        <router-link @click.native="changeHeaderLink('查询修改')" class="sideLeftWord y_made" to="/blogscomment">
                                                查询修改
                                        </router-link>
                                    </MenuItem>

                                <!-- <router-link v-on:click="changeMeanClass" :class="{'ivu-menu-item':true, 'router-link-exact-active':showMeanClass, 'router-link-active':showMeanClass}" name="2-1" to="/blogsupload">
                                    博客上传
                                </router-link> -->
                            </Submenu>
                            <Submenu name="3">
                                <template slot="title">
                                    <Icon type="ios-analytics" :size="iconSize"></Icon>
                                    <span class="layout-text">上传管理</span>
                                </template>
                                <MenuItem name="3-1">
                                    <router-link class="sideLeftWord y_made" to="file">
                                        博客图片
                                    </router-link>
                                </MenuItem>
                            </Submenu>
                            <Submenu name="4">
                                <template slot="title">
                                    <Icon type="ios-analytics" :size="iconSize"></Icon>
                                    <span class="layout-text">留言管理</span>
                                </template>
                                <MenuItem name="4-1">选项 1</MenuItem>
                                <MenuItem name="4-2">选项 2</MenuItem>
                            </Submenu>
                        </Menu>
                    </Col>
                    <Col :span="spanRight" class="layout-content-right">
                        <div class="layout-header">
                            <Button type="text" @click="toggleClick">
                                <Icon type="navicon" size="32"></Icon>
                            </Button>
                            <!--这里进行简单的用户状态设置-->
                            <div class="user">
                                <Dropdown>
                                    <a href="javascript:void(0)" class="name">
                                        {{ username }}
                                        <Icon type="arrow-down-b"></Icon>
                                    </a>
                                    <div class="img" style="display:inline">
                                        <Avatar style="background-color: #87d068"  icon="person" size="large" />
                                    </div>
                                    <DropdownMenu slot="list">
                                        <DropdownItem>新消息</DropdownItem>
                                        <DropdownItem @click="outLoging">注销</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                            <!-- <div class="y_userAdmin" v-on:mousemove="tipsShow=true">
                                <div class="y_adminName">
                                    {{ username }}
                                </div>
                                <div class="demo-avatar y_img">
                                    <Avatar style="background-color: #87d068" icon="person" size="large" />
                                </div>
                                <div v-on:mouseleave="tipsShow=false" :class="{'y_hide':true,'y_show': tipsShow}">
                                    <ul>
                                        <li>新消息</li>
                                        <li @click="outLoging">注销</li>
                                    </ul>
                                </div>
                            </div> -->
                        </div>
                        <div class="layout-breadcrumb">
                            <Breadcrumb>
                                    <BreadcrumbItem href="/" >
                                        首页
                                    </BreadcrumbItem>
                                    <BreadcrumbItem>{{ template.headerLink }}</BreadcrumbItem>
                            </Breadcrumb>
                        </div>
                        <div class="layout-content">
                            <!-- 变换的容器 -->
                            <router-view class='animated zoomInUp'></router-view>
                        </div>
                        <div class="layout-copy">
                            2011-2016 &copy; TalkingData
                        </div>
                    </Col>
                </Row>
            </div>
        </template>
    </div>
</template>

<script>
    // import Beijing from './assets/js/canvas-particle.js'
    // import Bei from './assets/js/textBeijing.js'
    import {mapState, mapMutations} from 'vuex' //引入vuex状态管理

    export default {
        data () {
            return {
                tipsShow:false,
                username:'admin', //之后优化设置为全局的axios
                login:false, //登录验证属性
                showMeanClass:false,
                spanLeft: 5,
                spanRight: 19, //登录栏目属性
                formInline: {
                    password: '',
                    user: '',
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
            ...mapState(['template']),
            
            author () {
                return this.$store.state.template.phonecode
            },
            iconSize () {
                return this.spanLeft === 5 ? 14 : 24;
            },
            wordPadding () {
                return this.spanLeft === 5 ? this.wordPaddingMethods() : this.wordPaddingMethodsTwo();
            }
        },
        mounted: function () {
            // console.log();
          this.$nextTick(function () {
            var screenHeight = $(window).height();
            this.$refs.layout.style.height = screenHeight+'px'
          })
        },
        methods: {
            changeHeaderLink (word) {//菜单单击事件
                this.$store.commit('setheaderLink',word);
            },
            outLoging () {
                this.login = true;
            },
            changeMeanClass () {
                // alert(1);
            },
            toggleClick () {
                if (this.spanLeft === 5) {
                    this.spanLeft = 2;
                    this.spanRight = 22;
                } else {
                    this.spanLeft = 5;
                    this.spanRight = 19;
                }
            },
            wordPaddingMethods () {
              console.log('文字正常大小');
            },
            wordPaddingMethodsTwo () {
              console.log('文字变小');
            },
            //登录栏目方法
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // console.log(this.formInline)
                        this.$http({
                            method:"POST",
                            url:'http://localhost:3000/users/login',
                            data:this.formInline
                        })
                        .then((response) => {
                            console.log(response);
                            if (response.data) {
                                this.username = response.data.name
                                this.$Message.success('登录成功跳转中!');
                                var that = this;
                                setTimeout(()=>{
                                    that.login = false;
                                },600)
                            } else {
                            this.$Message.error('用户名或密码错误失败!');
                            }
                        })
                        .catch((response) => {
                        });
                    } else {
                    }
                })
            },
            handleReplace (name) {
                this.$refs[name].resetFields();
            },
        },
        created: function() {
            // alert(1);
            // window.onload = function() {
                //配置
                // var config = {
                //     vx: 4,	//小球x轴速度,正为右，负为左
                //     vy: 4,	//小球y轴速度
                //     height: 2,	//小球高宽，其实为正方形，所以不宜太大
                //     width: 2,
                //     count: 200,		//点个数
                //     color: "121, 162, 185", 	//点颜色
                //     stroke: "130,255,255", 		//线条颜色
                //     dist: 6000, 	//点吸附距离
                //     e_dist: 20000, 	//鼠标吸附加速距离
                //     max_conn: 10 	//点到点最大连接数
                // }

                // //调用
                // CanvasParticle(config);
        }
    }
</script>

<style lang="scss" scoped>
    #J_dotLine{
        position: fixed;
        height: 100%;
        width: 100%;
    }
    .y_made{
        padding:14px 160px 14px 43px;
        margin:-14px -160px -14px -43px;
    }
    .sideLeftWord{
      color: rgba(255,255,255,.7);
      transition: all .4 ease;
      &:hover{
          color:rgba(255,255,255,1);
      }

    }
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        .ivu-row-flex{
            height: 100%;
        }
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        margin: 15px;
        height: 770px;
        overflow: auto;
        overflow-x: hidden;
        background: #fff;
        border-radius: 4px;
        position: relative;
    }
    .layout-content-main{
        padding: 10px;
    }
    
    .layout-menu-left{
        background: #464c5b;
    }

     //右边内容区
    .layout-content-right{
        position: relative;
        .layout-header{
            height: 60px;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0,0,0,.1);
            display: flex;
            justify-content:space-between;
            .user{
                padding-right: 15px;
                display: flex;
                align-items: center;
                a.name{
                    font-size: 16px;
                    position: relative;
                    top: 4px;
                    margin-right: 15px;
                    text-decoration: none;
                }
                .img{
                    display: inline;
                    vertical-align: middle
                }
            }
        }
        .layout-copy{
            width: 100%;
            text-align: center;
            padding: 10px 0 20px;
            color: #9ea7b4;
            position:absolute;
            bottom: 0;
        }
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .layout-ceiling-main a{
        color: #9ba7b5;
    }
    .layout-hide-text .layout-text{
        display: none;
    }
    .ivu-col{
        transition: width .2s ease-in-out;
    }

    // .y_userAdmin{
    //     float: right;
    //     height: 60px;
    //     width:140px;
    //     background-attachment: pink;
    //     position: relative;
    //     cursor: pointer;
    //     .y_img{
    //         display: inline-block;
    //         vertical-align: middle;
    //     }
    //     .y_adminName{
    //         display: inline-block;
    //         padding-right: 12px;
    //         line-height: 60px;
    //         font-size: 16px;
    //         font-weight: bold;
    //         color:rgba(0,0,0,.4);
    //         transition: all 1s ease;
    //         &:hover{
    //             color:rgba(0,0,0,.8);
    //         }
    //     }
    //     .y_hide{
    //         opacity: 0;
    //         position: absolute;
    //         // padding:10px 20px;
    //         width:120px;
    //         background:#e9e9e9;
    //         li{
    //             padding: 8px;
    //             cursor: pointer;
    //             &:hover{
    //                 transition: all .3s ease;
    //                 background:#fff;
    //             }
    //         }
    //     }
    //     .y_show{
    //         transition: all .3s ease;
    //         opacity: 1;
    //     }

    //     // &:hover .y_hide{
    //     //     transition: all .3s ease;
    //     //     opacity: 1;
    //     // }

    // }
    //登录的样式
    .y_login_box {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform:  translate(-50%,-50%);
        -ms-transform:  translate(-50%,-50%);
        -o-transform:  translate(-50%,-50%);
        transform: translate(-50%, -50%);
        padding: 30px 20px 30px 65px;
        box-sizing: border-box;
        background-color: #e9e9e9;
        border-radius:8px;
        .y_login_btn{
            margin-left: 20px;
            margin-right: 10px
        }
    }
</style>


